<script setup>
import BackButton from "@/components/BackButton.vue";
import {ref, getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance()
import { facInfo, summaryType, summaryProvincePost } from '@/scripts/api';
import { useRouter } from 'vue-router'
const router = useRouter()
const {facId, facName, subType} = router.currentRoute.value.query
const route = proxy.$route
const { meta, path } = route
meta.title=`${subType} - ${facName}`
const fac = ref({})
let tableData = []
const regionTableData = ref([])
await facInfo(facId).then(res=>{
  fac.value = res.data || {}
})
const fieldMapper= (item) => {
  return {
    bcNum: item.rawAll || '--',
    bcInsertNum: item.rawDay || '--',
    bcUpdateNum: item.rawDayUpdate || '--',
    bcDeleteNum: item.rawDayDelete || '--',
    ascNum: item.ascAll || '--',
    ascInsertNum: item.ascDay || '--',
    ascUpdateNum: item.ascDayUpdate || '--',
    ascDeleteNum: item.ascDayDelete || '--',
    marketNum: item.marketAll || '--',
    marketInsertNum: item.marketDay || '--',
    marketUpdateNum: item.marketDayUpdate || '--',
    marketDeleteNum: item.marketDayDelete || '--',
  }
}
await summaryType(facId, 1).then(res=>{
  tableData = res.data.map(item=>{
    return {
      ...fieldMapper(item),
      type:item.bigType,
    }
  })
})

const loadProvinceData = async (facId, typeCode, bigType) => {
  await summaryProvincePost(facId, typeCode, bigType).then(res=>{
    regionTableData.value = res.data.map(item=>{
      return {
        ...fieldMapper(item),
        type: item.province
      }
    })
  })
}
await loadProvinceData(facId, 1);
const sum = (data, field) =>{
  if(!data.length) return '--';
  return data.map(i=>i[field]).reduce((p,n)=>parseInt(p)+parseInt(n))  || '--'
}

const totalNum = () => {
  if(subType === '安捷力类'){
    return tableData[0]['ascNum']
  }else if(subType === '市场类' || subType === '自定义类'){
    return tableData[0]['marketNum']
  }else{
    return '--'
  }
}

const totalRow = (data)=>{
  return {
    type:'总计',
    bcNum: sum(data,'rawAll'),
    bcInsertNum: sum(data,'bcInsertNum'),
    bcUpdateNum: sum(data,'bcUpdateNum'),
    bcDeleteNum: sum(data,'bcDeleteNum'),
    ascNum: sum(data,'ascNum'),
    ascInsertNum: sum(data,'ascInsertNum'),
    ascUpdateNum: sum(data,'ascUpdateNum'),
    ascDeleteNum: sum(data,'ascDeleteNum'),
    marketNum: sum(data,'marketNum'),
    marketInsertNum: sum(data,'marketInsertNum'),
    marketUpdateNum: sum(data,'marketUpdateNum'),
    marketDeleteNum: sum(data,'marketDeleteNum'),
  }
}
if(tableData.length){
  tableData.unshift(totalRow(tableData))
}
if(regionTableData.value.length){
  regionTableData.value.unshift(totalRow(regionTableData.value))
}
const regionTabPrefix = ref('')
const tabName = ref('type')
const typeChange = async(row) => {
  regionTabPrefix.value = row.type === '总计' ? '' : row.type;
  tabName.value = "region";
  await loadProvinceData(facId, 1,regionTabPrefix.value)
  regionTableData.value.unshift(totalRow(regionTableData.value))
}

</script>

<template>
  <main style="padding: 20px">
    <el-descriptions size="large" :column="2" border>
      <template #title>
        <div style="display: flex;align-items: baseline;">
          <span style="font-size: 26px">{{ facName }}</span>
          <el-tag style="margin-left: 20px" type="success">生产型</el-tag>
          <el-tag style="margin-left: 10px">{{ subType }}</el-tag>
        </div>
      </template>
      <template #extra>
        <back-button/>
      </template>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">商业总量</span>
        </template>
        <span style="font-size: 20px">{{ fac.dealerCnt }} 家</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">总量</span>
        </template>
        <span style="font-size: 20px">{{ totalNum() }} 家</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">更新时间</span>
        </template>
        <el-date-picker
            v-model="fac.dateStr"
            type="month"
            placeholder="Pick a day"
            size="large"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">版本周期</span>
        </template>
        <span style="font-size: 20px">月</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider style="margin: 30px 0"/>
    <el-tabs type="border-card" v-model="tabName">
      <el-tab-pane label="性质统计" name="type">
        <el-table style="height: calc( 100vh - 390px)" :data="tableData" size="large" @row-click="typeChange" row-class-name="row-class">
          <el-table-column type="expand">
            <template #default="props">
              <el-descriptions :column="1" style="padding: 10px 10px 10px 60px">
                <el-descriptions-item>
                  <template #label>
                    <div class="desc_label">日增加量</div>
                  </template>
                  <div  class="desc_body">
                    <div>{{ props.row.bcInsertNum }}</div>
                    <div>{{ props.row.ascInsertNum}}</div>
                    <div>{{ props.row.marketInsertNum }}</div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="desc_label">日更新量</div>
                  </template>
                  <div  class="desc_body">
                    <div>{{ props.row.bcUpdateNum }}</div>
                    <div>{{ props.row.ascUpdateNum}}</div>
                    <div>{{ props.row.marketUpdateNum }}</div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="desc_label">日删除量</div>
                  </template>
                  <div  class="desc_body">
                    <div>{{ props.row.bcDeleteNum }}</div>
                    <div>{{ props.row.ascDeleteNum}}</div>
                    <div>{{ props.row.marketDeleteNum }}</div>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column width="150">
            <template #default="scope">
              <span class="header">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">别称总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.bcNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">客户总量（安捷力）</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.ascNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">客户总量（市场）</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.marketNum }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="region">
        <template #label>
          <span style="font-weight: bolder">{{regionTabPrefix}}</span> 区域统计
        </template>
        <el-table style="height: calc( 100vh - 390px)" :data="regionTableData" size="large">
          <el-table-column type="expand">
            <template #default="props">
              <el-descriptions :column="1" style="padding: 10px 10px 10px 60px">
                <el-descriptions-item>
                  <template #label>
                    <div class="desc_label">日增加量</div>
                  </template>
                  <div  class="desc_body">
                    <div>{{ props.row.bcInsertNum }}</div>
                    <div>{{ props.row.ascInsertNum}}</div>
                    <div>{{ props.row.marketInsertNum }}</div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="desc_label">日更新量</div>
                  </template>
                  <div  class="desc_body">
                    <div>{{ props.row.bcUpdateNum }}</div>
                    <div>{{ props.row.ascUpdateNum}}</div>
                    <div>{{ props.row.marketUpdateNum }}</div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="desc_label">日删除量</div>
                  </template>
                  <div  class="desc_body">
                    <div>{{ props.row.bcDeleteNum }}</div>
                    <div>{{ props.row.ascDeleteNum}}</div>
                    <div>{{ props.row.marketDeleteNum }}</div>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column width="150">
            <template #default="scope">
              <span class="header">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">别称总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.bcNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">客户总量（安捷力）</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.ascNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">客户总量（市场）</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.marketNum }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </main>
</template>
<style scoped>
::v-deep(.el-descriptions__header){
  height: 50px;
}
.header{
  font-size: 18px;
}
.content{
  font-size: 24px;
}
.desc_label{
  display: inline-block;width: 100px
}
.desc_body{
  display: inline-flex;justify-content: space-between; width: calc( 100% - 120px);padding: 0 40px
}
.desc_body > div{
  font-size: 18px;
  font-weight: bold;
  width: calc( (100% - 120px) / 3)
}
.row-class{
  background-color: #409EFF;
  cursor: pointer;
}
</style>
